import styled from 'styled-components'
import IconPrize from '../../../asserts/home_prize.png'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { PrizeInfo } from '../../../service'
import { prize } from '../../../service/request/activity'
import Message from '../../../component/Message'
import Icon from '../../../component/Icon'
import { useTranslation } from 'react-i18next'
import Detail from './Detail'
import AutoScaleItem from './AutoScaleItem'
import useSwitch from '../../../hook/switch'
import Loading from '../../../component/Loading'
import NotificationCenter from '../../../utils/notification'
import { NotificationPrizeName } from '../constants'

interface Props {
    className?: string
}

const Contaienr = styled.div`
    width: 6.125rem;
    height: 5.625rem;
    background: url(${IconPrize}) no-repeat no-repeat center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
 `

const Title = styled.div`
    margin-top: .625rem;
    background-color: #0E6CAA;
    padding: .25rem .3125rem .1875rem;
    box-sizing: border-box;
    font-size: .375rem;
    border-radius: .125rem;
`
const Item = styled(AutoScaleItem)`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .text {
        margin-left: .125rem;
        font-weight: 600;
        font-size: .875rem;
        color: white;
    }
`

const List = styled.div<{ scale: number }>`
    padding: .25rem;
    box-sizing: border-box;
    width: 80%;
    transform: scale(${props => props.scale});
`

const Prize: React.FC<Props> = ({ className }) => {
    const { t } = useTranslation()
    const [info, setInfo] = useState<PrizeInfo>()
    const [show, setShow] = useState<boolean>(false)
    const [loading, setLoading] = useState<boolean>(false)
    const [scale, setScale] = useState(1)

    const [config] = useSwitch()
    const showPrize = useMemo(() => config.boolForKey('poolReward', false), [config])

    const coins = useMemo(() => {
        return [
            { icon: 'ton_coin', count: info?.poolTon || 0 },
            { icon: 'icon_coin', count: info?.poolEarth || 0 }
        ]
    }, [info])

    const fetchData = useCallback(async () => {
        setLoading(true)
        const res = await prize()
        setLoading(false)
        if (!res.success) {
            Message.error(res.message)
            return
        }
        setInfo(res.data)
    }, [])

    useEffect(() => {
        fetchData()
    }, [fetchData])

    const onClick = useCallback(async () => {
        await fetchData()
        setShow(true)
    }, [fetchData])

    const onClose = useCallback(() => {
        setShow(false)
    }, [])

    const onGet = useCallback(() => {
        onClose()
        fetchData()
        NotificationCenter.post(NotificationPrizeName)
    }, [onClose, fetchData])

    const onCalScale = (s: number) => {
        setScale(pre => Math.min(s, pre))
    }

    return (showPrize ? <>
        <Contaienr
            className={className}
            onClick={onClick}
        >
            <Title>{t('home.prize.title')}</Title>
            <List scale={scale}>
                {coins.map((item) => <Item
                    textClassName='text'
                    key={item.icon}
                    children={String(item.count)}
                    prefix={<Icon
                        name={item.icon}
                        width='0.75rem'
                        height='0.75rem'
                    />}
                    calScale={onCalScale}
                >
                </Item>)}
            </List>
        </Contaienr>
        <Loading show={loading} />
        {info && <Detail
            show={show}
            data={info}
            onClose={onClose}
            onGet={onGet}
        />}
    </> : <></>)

}

export default Prize